<?php

use common\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model addons\Minerva\common\models\Tasks */
/* @var $form yii\widgets\ActiveForm */

$this->title = 'Tasks';
$this->params['breadcrumbs'][] = ['label' => 'Tasks', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<script type="text/javascript" src="/resources/plugins/webuploader/jquery.min.js"></script>
<script type="text/javascript" src="/resources/plugins/echarts/echarts-all.js"></script>

<!--引入插件的CSS文件-->
<link rel="stylesheet" type="text/css" href="/resources/plugins/webuploader/webuploader.css">

<!--引入插件的JS文件-->
<script type="text/javascript" src="/resources/plugins/webuploader/webuploader.js"></script>
<!-- Toastr style -->
<!--<link href="/resources/plugins/inspinia/css/plugins/toastr/toastr.min.css" rel="stylesheet">-->
<style>
    .sortable-list{
        max-height: 320px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .sortable-list::-webkit-scrollbar {
        display: none;
    }

    /*html {*/
    /*    background-color: #028090;*/
    /*}*/
    .cmd-container h1,
    .cmd-container h2,
    .cmd-container h3,
    .cmd-container h4,
    .cmd-container h5 {
        font-family: 'Merriweather', serif;
        color: #00FF00;
    }
    .cmd-container p,
    .cmd-container input,
    .cmd-container select,
    .cmd-container button {
        font-family: 'Inconsolata', monospace;
        color: #00FF00;
    }
    .cmd-container {
        position: relative;

        float: left;
        /*bottom: 0;*/
        /*left: 0;*/
        /*display: flex;*/
    }
    .cmd-container .shell-container {
        margin: auto;
        background-color: #000000;
        width: 520px;
        height: 235px;
        box-shadow: 0 0 10px #000000;
        /*display: flex;*/
        /*flex-direction: column;*/
    }
    .cmd-container .shell-container .header-shell {
        margin: auto;
        background-color: white;
        width: 100%;
        height: 35px;
        display: flex;
    }
    .cmd-container .shell-container .header-shell .cli-img {
        margin: auto 5px;
        width: 20px;
        height: 20px;
    }
    .cmd-container .shell-container .header-shell .shell-title {
        font-size: 13px;
        margin: auto 0;
        color: #000000;
    }
    .cmd-container .shell-container .header-shell .minimize {
        margin: 1px 1px 1px auto;
        width: 35px;
        height: 33px;
        /*display: flex;*/
    }
    .cmd-container .shell-container .header-shell .minimize:hover {
        background-color: #DFDFDF;
        color: #FFFFFF;
    }
    .cmd-container .shell-container .header-shell .minimize:after {
        content: '';
        transform: rotate(90deg);
        margin: auto;
        border: 1px solid gray;
        height: 10px;
    }
    .cmd-container .shell-container .header-shell .minimize:hover:after {
        border-color: #000000;
    }
    .cmd-container .shell-container .header-shell .maximize {
        display: flex;
        margin: 1px 0;
        width: 35px;
        height: 33px;
        content: "-";
    }
    .cmd-container .shell-container .header-shell .maximize:hover {
        background-color: #DFDFDF;
        color: #FFFFFF;
    }
    .cmd-container .shell-container .header-shell .maximize:after {
        content: '';
        transform: rotate(90deg);
        margin: auto;
        border: 1.5px solid gray;
        height: 7.5px;
        width: 7.5px;
    }
    .cmd-container .shell-container .header-shell .maximize:hover:after {
        border-color: #000000;
    }
    .cmd-container .shell-container .header-shell .close {
        display: flex;
        margin: 1px;
        width: 35px;
        height: 33px;
        content: "-";
    }
    .cmd-container .shell-container .header-shell .close:hover {
        background-color: #FF0000;
        color: #FFFFFF;
    }
    .cmd-container .shell-container .header-shell .close:before {
        content: '';
        transform: rotate(-135deg) translate(-50%, 0%);
        margin: auto 0 auto auto;
        border: 1px solid gray;
        height: 11px;
    }
    .cmd-container .shell-container .header-shell .close:hover:before {
        border-color: #FFFFFF;
    }
    .cmd-container .shell-container .header-shell .close:after {
        content: '';
        transform: rotate(135deg) translate(50%, 0%);
        margin: auto auto auto 0;
        border: 1px solid gray;
        height: 11px;
    }
    .cmd-container .shell-container .header-shell .close:hover:after {
        border-color: #FFFFFF;
    }
    .cmd-container .shell-container .body-shell {
        margin: auto;
        overflow-y: scroll;
        height: 200px;
        width: 100%;
        line-height: 0px;
        /*display: flex;*/
        /*flex-direction: column;*/
        font-size: 14px;
        padding-bottom: 35px;
    }
    .cmd-container .shell-container .body-shell .microsoft-label {
        margin: 5px 0;
        padding-left: 5px;
        /*float: left;*/
        display: block;
        line-height: 15px;
    }
    .cmd-container .shell-container .body-shell .input {
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
        display: block;
        /*float: left;*/
        line-height: 25px;
    }
    .cmd-container .shell-container .body-shell .input .ping {
        margin: auto 2px -5px;
        width: 7px;
        height: 4px;
        animation: pong 1s infinite;
    }
    @keyframes pong {
        0% {
            background-color: #DFDFDF;
        }
        50% {
            background-color: #DFDFDF;
        }
        51% {
            background-color: #000000;
        }
    }
</style>

<div id="wrapper">



    <div id="page-wrapper" class="gray-bg" style="width:100%;">

        <div id="biao" style="height:250px;width: 250px;float: left;"></div>

<!--        <div class="input-group" style="float: left;">-->
<!--            <input type="text" placeholder="添加新任务 " class="input form-control-sm form-control">-->
<!--            <span class="input-group-btn">-->
<!--                                        <button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加任务</button>-->
<!--                                </span>-->
<!--        </div>-->

        <div class="index-div" style="float: left;height: 300px;width:20%;">
            <!--从 uploader 开始，是上传相关代码-->
            <div id="uploader" class="wu-display">
                <!--用来存放文件信息-->
                <div id="thelist" class="uploader-list"></div>
                <div class="btns">
                    <!--<input class="style_file_content" accept="video/mp4" type="file" id="upload_file_id"/>-->
                    <div id="picker">选择文件</div>
                    <button id="ctlBtn" class="btn btn-default" >开始上传</button>
                    <button id="resetBtn" class="btn btn-default" >重试</button>
                </div>
            </div>
        </div>
        <div class="cmd-container" style="float: right;">
            <div class="shell-container">
                                <div class="header-shell">
<!--                                    <img class="cli-img" src="https://upload.wikimedia.org/wikipedia/en/e/ef/Command_prompt_icon_%28windows%29.png" alt="windows_cli.png" />-->
                                    <p class="shell-title">C:\\Windows\system32\cmd.exe</p>
                                    <span class="minimize"></span>
                                    <span class="maximize"></span>
                                    <span class="close"></span>
                                </div>
                <div class="body-shell" id="body-shell">
                    <!--                    <p class="microsoft-label">Microsoft Windows [version 10.0.10586]</p>-->
                    <!--                    <p class="microsoft-label">(c) 2015 Microsoft Corporation. All rights reserved.</p>-->
                    <!--                    <p class="microsoft-label">(c) 2015 Microsoft Corporation. All rights reserved.</p>-->
                    <p class="input">(c)当前系统用户：tangyanwu
                        <span class="ping">
                    </span>
                    </p>

                </div>
            </div>
        </div>


<div style="clear: both;"></div>
        <div class="wrapper wrapper-content  animated fadeInRight" style="width:100%;">
            <div class="row">
                <div class="col-lg-4">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h3>待上传<a class="float-right">文件个数：<span class="text-success">0</span></a></h3>
                            <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务</p>

                            <ul class="sortable-list connectList agile-list" id="wait">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h3>进行中<a class="float-right">文件个数：<span class="text-warning">0</span></a></h3>
                            <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务</p>
                            <ul class="sortable-list connectList agile-list" id="doing">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h3>已完成<a class="float-right">文件个数：<span class="text-info">0</span></a></h3>
                            <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务</p>
                            <ul class="sortable-list connectList agile-list" id="completed">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('biao'));

    var option = {
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        // toolbox: {
        //     show : true,
        //     feature : {
        //         mark : {show: true},
        //         restore : {show: true},
        //         saveAsImage : {show: true}
        //     }
        // },
        series : [
            {
                name:'业务指标',
                type:'gauge',
                min:0,
                max:5,
                splitNumber: 10,       // 分割段数，默认为5
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 10,   // 每份split细分多少段
                    length :12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    show: true,        // 默认显示，属性show控制显示与否
                    length :15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer : {
                    width : 5
                },
                title : {
                    show : true,
                    offsetCenter: [0, '-40%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize:15,
                    }
                },
                detail : {
                    formatter:'{value}M/s',
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'auto',
                        fontWeight: 'bolder',
                        fontSize:20
                    }
                },
                data:[{value: 0, name: ''}]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);

    // setInterval(function (){
    //     option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
    //     myChart.setOption(option,true);
    // },2000);
</script>
<script>
    // $(documment).ready(function () {

    // });

    $(function () {
        // alert("uploader");
        $list = $('#thelist'),
            $wait = $('#wait'),
            $doing = $('#doing'),
            $completed = $('#completed'),
            $ctlBtn = $('#ctlBtn'),
            $resetBtn = $('#resetBtn'),
            state = 'pending',
            uploader;
        var guid = WebUploader.Base.guid();
        var body_shell = document.getElementById('body-shell');
        var num;
        var times = 0;

        WebUploader.Uploader.register({
            "before-send-file": "beforeSendFile", //整个文件上传前
            "before-send": "beforeSend", //每个分片上传前
            "after-send-file": "afterSendFile", //分片上传完毕
        }, {
            //时间点1：所有分块进行上传之前调用此函数
            beforeSendFile: function (file) {

                console.log('哈哈哈'+uploader.option("formData"));
                var deferred = WebUploader.Deferred();
                //1、计算文件的唯一标记fileMd5，用于断点续传  如果.md5File(file)方法里只写一个file参数则计算MD5值会很慢 所以加了后面的参数：10*1024*1024
                (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function (percentage) {
                    $('#' + file.id).find('span.state').text('正在读取文件信息...');
                })
                    .then(function (val) {
                        $('#' + file.id).find("span.state").text("成功获取文件信息...");
                        fileMd5 = val;
                        //获取文件信息后进入下一步
                        deferred.resolve();
                    });
                fileName = file.name; //为自定义参数文件名赋值
                webkit = file.source.source.webkitRelativePath ? file.source.source.webkitRelativePath : '';
                ext = file.ext;
                // uploadType =
                // console.log(file);
                return deferred.promise();
            }, //时间点2：如果有分块上传，则每个分块上传之前调用此函数
            beforeSend: function (block) {
                // console.log('分片'+block.chunk);
                num = block.chunk;
                // var deferred = WebUploader.Deferred();
                // $.ajax({
                //     type: "POST",
                //     url: "/content/content/webuploadChunks", //ajax验证每一个分片
                //     data: {
                //         param: "checkChunk",
                //         fileName: fileName,
                //         jindutiao: '', //$("#jindutiao").val(),
                //         fileMd5: fileMd5, //文件唯一标记
                //         chunk: block.chunk, //当前分块下标
                //         chunkSize: block.end - block.start//当前分块大小
                //     },
                //     cache: false,
                //     async: false, // 同步
                //     timeout: 1000, //todo 超时的话，只能认为该分片未上传过
                //     //dataType:"json",
                //     success: function (response) {
                //         var res = eval('(' + response + ')');
                //         if (res.ifExist) {
                //             //分块存在，跳过
                //             deferred.reject();
                //         } else {
                //             //分块不存在或不完整，重新发送该分块内容
                //             deferred.resolve();
                //         }
                //     }
                // });
                // this.owner.options.formData.fileMd5 = fileMd5;
                // this.owner.options.formData.fullPath = webkit;
                // this.owner.options.formData.uploadType = 'file';
                // this.owner.options.formData.contentid = id;
                // this.owner.options.formData.ext = ext;
                // deferred.resolve();
                // return deferred.promise();
            },
//             //时间点3：所有分块上传成功后调用此函数
//             afterSendFile: function () {
//                 //如果分块上传成功，则通知后台合并分块
//                 $.ajax({
//                     type: "POST",
//                     url: "/content/content/webuploadMer", //ajax将所有片段合并成整体
//                     data: {
//                         param: "mergeChunks",
//                         fileName: fileName,
//                         fileMd5: fileMd5
//                     },
//                     success: function (data) {
// //                            count++; //每上传完成一个文件 count+1
// //                            if (count <= filesArr.length - 1) {
// //                                uploader.upload(filesArr[count].id); //上传文件列表中的下一个文件
// //                            }
//                         //合并成功之后的操作
//                     }
//                 });
//             }
        });

        uploader = WebUploader.create({
            // swf文件路径， 需要修改为你自己存放的路径
            swf: '/resources/webuploader/Uploader.swf',
            // 文件接收服务端。  // 需要修改为你的后端地址
            server: 'http://172.16.0.118/api/minerva/v1/file/files?access-token=YbYBbg2tSF4QRmpu1aclncIja5acrb2o_1625623597',
            // dnd 指定Drag And Drop拖拽的容器，如果不指定，则不启动
            // 禁用全局拖拽，否则在没有启动拖拽容器的情况下，视频拖进来后会直接在浏览器内播放。
            disableGlobalDnd: true,

            // 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#picker',                     // 对应 html 中的 picker
                innerHTML: '选择文件',   // 按钮上显示的文字
                multiple: true,                  // 多文件选择
            },

            // 允许视频和图片类型的文件上传。
            // accept: {
            //     title: 'Video',
            //     extensions: 'mp4,gif,jpg,jpeg,bmp,png,zip',      // 可以多个后缀，以逗号分隔， 不要有空格
            //     mimeTypes: 'video/*,image/*,zip/*'
            // },

            // 只允许选择图片文件。
            //accept: {
            // title: 'Images',
            //  extensions: '',
            //  mimeTypes: ''
            //}

            // thumb配置生成缩略图的选项， 此项交由后台完成， 所以前台未配置

            // 自动上传暂时关闭，使用多文件队列上传， 如果值为true，那么在选择完文件后，将直接开始上传文件，因为我还要做一些其他处理，故选择false。
            auto: false,

            //是否允许在文件传输时提前把下一个文件准备好。 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。 如果能提前在当前文件传输期处理，可以节省总体耗时。
            prepareNextFile: true,

            // 可选，是否要分片处理大文件上传
            chunked: true,
            // 如果要分片，分多大一片？这里我设置为2M, 如需更大值，可能需要需修改php.ini等配置
            chunkSize:2*1024*1024,
            // 如果某个分片由于网络问题出错，允许自动重传多少次
            chunkRetry: 3,
            // 上传并发数，允许同时上传最大进程数，默认3
            threads:5,

            // formData {Object} [可选] [默认值：{}] 文件上传请求的参数表，每次发送都会发送此对象中的参数。 其实就是post中的表单数据，可自定义字段。
            formData: {
                context: 1,     // 这里是我的业务数据，你可以自定义或者去掉此项都可以
                from: "pan",    // 这里是我的业务数据，你可以自定义或者去掉此项都可以
                guid: WebUploader.Base.guid(),
            },
            //[可选] 验证文件总数量, 超出9个文件则不允许加入队列。
            fileNumLimit: 50,
            // 验证文件总大小是否超出限制（2G）, 超出则不允许加入队列。根据需要进行设置。除了前面几个，其它都是可选项
            fileSizeLimit: 1024*1024*1024*2,
            // 验证单个文件大小是否超出限制（2G）, 超出则不允许加入队列。
            fileSingleSizeLimit: 1024*1024*1024*2,
            // [可选] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
            duplicate: true,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            // resize: false,
            // 压缩选项
            compress: {
                // 如果压缩后比源文件大，则不压缩，图片有可能压缩后比原文件还大，需设置此项
                noCompressIfLarger: true,
            },
        });

        // 以下都是监听事件， 方法中的file 和 response 参数，需了解，并
        var per = 0;
        // 当有文件被添加进队列的时候触发，用于显示加载进度条
        uploader.on( 'fileQueued', function( file ) {
            // var times = 1;
            // interval = setInterval(function () {
            //     times++;
            // }, 1000);

            // $list.append( '<div style="position: relative" id="' + file.id + '" class="item">' +
            //     '<h4 class="info" style="width: 150px; text-overflow: ellipsis">' + file.name + '</h4>' +
            //     '<p class="state" style="position: absolute; top: 0px; left: 120px; width: 120px; border: #00a2d4 solid 1px">正在加载...</p>' +
            //     '</div>' );
            var str = `<li class="info-element" id="id${file.id}">
                    ${file.name}
                    <span></span>
                    <div class="agile-detail">
                        <a href="#" class="float-right btn btn-xs btn-white">加载完成 100%</a>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-success" style="width: 100%" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </li>`;
            if($wait.children('li').length>0){
                $wait.find('li:first-child').before(str);
            }else{
                $wait.append(str);
            }

            $('.body-shell').append(`
                        <p class="microsoft-label">(c)提示>> ${file.name}加载成功</p></br>
                    `);
            if ((body_shell.scrollHeight > body_shell.clientHeight) || (body_shell.offsetHeight > body_shell.clientHeight)) {
                console.log('该div有滚动条！');
                body_shell.scrollTop = body_shell.scrollHeight;
            }

            var $li = $( '#'+file.id );
            var $lis = $( '#id'+file.id )

            //生成文件的MD5值， 可以用来实现秒传， 如不需要，可以忽略（数据库中保存md5值，如果存在相同md5，直接在文件服务器复制一份，不需再次分片上传以及合并，极快）
            // uploader.md5File( file )
            //     // 及时显示进度
            //     .progress(function(percentage) {
            //         $percent = $li.find('.state');
            //         $li.find('p.state').text('加载中 '+  Math.round(percentage * 100)  + '%');
            //         var status_pre = file.size * (percentage - per);
            //         per = percentage;
            //         var speedKB = ((status_pre / 1024) / times / 1024).toFixed(0) + "M/s";
            //         $lis.find('a').text(speedKB+' '+  Math.round(percentage * 100)  + '%');
            //         $lis.find('span').text('大小：'+(file.size/1024/1024)+ "M");
            //         $lis.find('.progress-bar').css('width',Math.round(percentage * 100)  + '%');
            //         console.log('Percentage:', percentage);
            //     })
            //     // 完成
            //     .then(function(md5) {
            //         // 将md5值加入到post的表单数据formData中， 与上文中的 context 和 from字段相同
            //         uploader.option("formData",{
            //             ... {"md5": md5}
            //         });
            //         $lis.find('a').text('加载完成  100%');
            //         console.log('md5:', md5);
            //         var span = $wait.siblings('h3').find('span');
            //         span.text(parseInt(span.text())+1);
            //         $('.body-shell').append(`
            //             <p class="microsoft-label">(c)提示>> ${file.name}加载成功,md5:${md5}</p></br>
            //         `);
            //         if ((body_shell.scrollHeight > body_shell.clientHeight) || (body_shell.offsetHeight > body_shell.clientHeight)) {
            //             console.log('该div有滚动条！');
            //             body_shell.scrollTop = body_shell.scrollHeight;
            //         }
            //     });
        });

        // 文件上传过程中创建进度条实时显示。
        // 显示进度条
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var times = 1;
            interval = setInterval(function () {
                times++;
            }, 1000);

            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');

            var $wait_li = $('#wait').find('#id'+file.id);
            if($wait_li.length>0){
                $('#wait').find('#id'+file.id).remove();
                var wait_span = $wait.siblings('h3').find('span');
                wait_span.text(parseInt(wait_span.text())-1);
                var str = `<li class="warning-element" id="id${file.id}">
                    ${file.name}
                    <div class="agile-detail">
                        <a href="#" class="float-right btn btn-xs btn-white">上传中...</a>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-warning" style="width: 0%" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </li>`;
                if($doing.children('li').length>0){
                    $doing.find('li:first-child').before(str);
                }else{
                    $doing.append(str);
                }
                var doing_span = $doing.siblings('h3').find('span');
                doing_span.text(parseInt(doing_span.text())+1);
            }
            // 避免重复创建
            if ( !$percent.length ) {

                // $percent = $('<div class="progress progress-striped active">' +
                //     '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                //     '</div>' +
                //     '</div>').appendTo( $li ).find('.progress-bar');
            }

            var status_pre = file.size * percentage - num * 2 * 1024 * 1024;
            if (status_pre <= 0) {
                return;
            }
            var speedKB = ((status_pre / 1024) / times /1024).toFixed(0);

            option.series[0].data[0].value = speedKB;
                myChart.setOption(option,true);



            var $lis = $( '#id'+file.id );
            $li.find('p.state').text('上传中'+ Math.round(percentage * 100)  + '%' );

            $lis.find('.progress-bar').css('width',Math.round(percentage * 100)  + '%');

            if(Math.round(percentage * 100) == 100)
            {
                $li.find('p.state').text('即将完成');
                $lis.find('a').text('即将完成 '+  Math.round(percentage * 100)  + '%');            }

            // $percent.css( 'width', percentage * 100 + '%' );
        });

        // 监听上传成功
        uploader.on( 'uploadSuccess', function( file , res) {
            option.series[0].data[0].value = 0;
            myChart.setOption(option,true);

            $doing.find('#id'+file.id).remove();
            var doing_span = $doing.siblings('h3').find('span');
            doing_span.text(parseInt(doing_span.text())-1);
            var str = `<li class="success-element" id="id${file.id}">
                    ${file.name}
                    <div class="agile-detail">
                        <a href="#" class="float-right btn btn-xs btn-white">已完成 100%</a>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </li>`;
            if($completed.children('li').length>0){
                $completed.find('li:first-child').before(str);
            }else{
                $completed.append(str);
            }
            var completed_span = $completed.siblings('h3').find('span');
            completed_span.text(parseInt(completed_span.text())+1);
            var $lis = $( '#id'+file.id );
            $lis.find('a').text('已完成 100%');
            $( '#'+file.id ).find('p.state').text('已上传');
        });
        // 监听上传失败
        uploader.on( 'uploadError', function( file ) {
            alert("上传出错")
            $( '#'+file.id ).find('p.state').text('上传出错');
        });
        // 监听上传完成，不论失败还是成功
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
            console.log(uploader.getStats());
        });
        $('#ctlBtn').click(function(){
            uploader.upload(); // 手动上传
        })
        $('#resetBtn').click(function(){
            uploader.retry(); // 重新上传
        })
    })


    function getSpeed(currentSize) {
        if (timeFloat() - preTime <= 0.3) {
            return currentSpeed;
        }
        preTime = timeFloat();
        var arr_len = 5;
        if (typeof (speedList) == 'undefined') {
            speedList = [[timeFloat() - 0.5, 0], [timeFloat(), currentSize]];
        } else {
            if (speedList <= arr_len) {
                speedList.push([timeFloat(), currentSize]);
            } else {
                speedList = speedList.slice(1, arr_len);
                speedList.push([timeFloat(), currentSize]);
            }
        }
        var last = speedList[speedList.length - 1],
            first = speedList[0];
        //console.log("first: " + first)
        //console.log("last: " + last)
        var speed = (last[1] - first[1]) / (last[0] - first[0]);
        console.log("speed " + speed);
        speed = getFileSize(speed) + '/s';
        currentSpeed = speed;
        return speed;
    }

    function getFileSize(fileByte) {
        var fileSizeByte = fileByte;
        var fileSizeMsg = "";
        if (fileSizeByte < 1048576)
            fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
        else if (fileSizeByte == 1048576)
            fileSizeMsg = "1MB";
        else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824)
            fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
        else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824)
            fileSizeMsg = "1GB";
        else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776)
            fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
        else
            fileSizeMsg = "文件超过1TB";
        return fileSizeMsg;
    }

</script>

